import React, {Component} from 'react'

import {Text, View} from 'react-native'

import {createAppContainer} from 'react-navigation'

import {createMaterialTopTabNavigator} from 'react-navigation-tabs'

class TopNavigator extends Component{
    constructor(props){
        super(props)
        this.NAMES = ['HTML5', 'CSS3', 'JavaScript', 'React', 'Vue', 'ThreeJS']
    }

    _getTab(){
        let tabs = {}
        this.NAMES.forEach(item => {
            tabs[`${item}`] = {
                screen: props => {
                    return <AppTopDetail {...props} name={item} />;
                }
            }
        })
        console.log(AppTopDetail)
        console.log(<AppTopDetail></AppTopDetail>)
        return tabs
    }

    render(){
        const Tabs = createAppContainer(createMaterialTopTabNavigator(
            this._getTab(), {
                lazy: true,
                tabBarOptions: {
                    upperCaseLabel: false,
                    indicatorStyle: {
                        backgroundColor: 'pink',
                        height: 3
                    },
                    style: {
                        backgroundColor: 'lightblue'
                    },
                    scrollEnabled: true
                }
            }
        ))
        return <Tabs></Tabs>
    }
}

class AppTopDetail extends Component{
    render(){
        return (
            <View>
                <Text>{this.props.name}</Text>
            </View>
        )
    }
}


export default TopNavigator